<template>
  <div id="cover">
  <el-container id="app" style="height:100vh">
    <el-aside>
      <div id="headImage" src="../src/assets/"></div>
      <p id="title">Clang - Ediotr</p>
      <div id="menu" >
        <div class="menu-item" @click="routeDir('1')">
          <i class="el-icon-s-home"></i>
          <p>首 页</p>
        </div>
        <div class="menu-item" @click="routeDir('2')">
          <i class="el-icon-s-home"></i>
          <p>首 页</p>
        </div>
        <div class="menu-item" @click="routeDir('3')">
          <i class="el-icon-s-home"></i>
          <p>首 页</p>
        </div>
      </div>
      <p id="version">Version:0.0.1 alpha</p>
    </el-aside>
    <el-main><keep-alive><router-view></router-view></keep-alive></el-main>
  </el-container>
      <div id="background-video">
      <video id= "video" src="../src/assets/pw.mp4" muted loop autoplay style="object-fit: fill;"></video>
      </div>
      </div>
</template>
<script>
// import route from './router/index'
export default {
  methods: {
    routeDir(par){
      
      switch (par) {
        case '1':
          this.$router.replace("Index")
          break;
        case '2':
          this.$router.replace("Setting")
          break;
        case '3':
          this.$router.replace("About")
          break;
        default:
          
          break;
      }
      return undefined
    }
  }
}
</script>
<style lang="scss" >
 * {
   margin: 0px;
   padding: 0px;
   overflow: hidden;
   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   user-select: none; 
   
 }
</style>

<style lang="scss" scoped>
#video{
  height: 100%;
  width: 100%;
}
#cover {
  position: relative;
}
.el-main {
  padding-bottom: 5px;
}
#background-video {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}
aside {
  //el-aside
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: rgba($color: #000000, $alpha: 0.25);

  #version {
      //version
      color: whitesmoke;
      justify-self: flex-end;
      
  }
  #headImage {
    // background-image: url('../src/assets/head.jpg');
    background-color: rgba($color: #ffff, $alpha: 1.0);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 64px;
    box-shadow: 0 0 7px 0.2px #fff;
  }
  #title {
    color: #fff;
    font-size: 1.8rem;
    margin-top: 28px;
  }
  #menu {
    margin-top: 45px;
    width: 100%;
    color: whitesmoke;


    .menu-item {
      display: flex;;
      justify-content: center;
      align-items: center;
      font-size: 1.7rem;
      margin-bottom: 1.8rem;
      letter-spacing: 1.5rem;
      background-color:rgba(0,0,0,.25);
      // background-color: whitesmoke
      width: 100%;
      transition: .3s;
      cursor: pointer;
      &:hover {
        background-color: whitesmoke;
        i,p {
          filter:invert(100%);
        }
      }
      i {
        margin-right: 10px;
      }
      p,i {
        margin: 5px 0px;
      }

    }

  }


}
</style>
